<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { userRegister } from '@/apis/accountAPI'

interface RegisterForm {
  phone: string
  password: string
  confirmPassword: string
  userType: 'doctor' | 'user'
}

const registerForm = reactive<RegisterForm>({
  phone: '',
  password: '',
  confirmPassword: '',
  userType: 'user'
})

const rules = {
  phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }, { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 16, message: '密码长度为6-16位', trigger: 'blur' }],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    {
      validator: (rule: any, value: string, callback: Function) => {
        if (value !== registerForm.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

const registerFormRef = ref()
const router = useRouter()
const loading = ref(false)

const handleRegister = async () => {
  if (!registerFormRef.value) return
  await registerFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      loading.value = true
      try {
        await userRegister({
          phone: registerForm.phone,
          password: registerForm.password,
          confirmPassword: registerForm.confirmPassword
        })
        ElMessage.success('注册成功')
        // 注册成功后跳转到登录页面
        router.push('/login')
      } catch (error: any) {
        ElMessage.error(error.message || '注册失败，请稍后重试')
      } finally {
        loading.value = false
      }
    }
  })
}

const goToLogin = () => {
  router.push('/login')
}
</script>

<template>
  <div class="login-container">
    <div class="background-section">
      <div class="logo">logo</div>
      <div class="background-image">背景图</div>
    </div>
    <div class="form-section">
      <div class="form-content">
        <div class="form-title">注册</div>
        <div class="user-type-select">
          <el-radio-group v-model="registerForm.userType">
            <el-radio-button label="user">用户端</el-radio-button>
            <el-radio-button label="doctor">医生端</el-radio-button>
          </el-radio-group>
        </div>
        <el-form
          ref="registerFormRef"
          :model="registerForm"
          :rules="rules"
          label-position="top"
          class="register-form"
        >
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="registerForm.phone" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="registerForm.password"
              type="password"
              placeholder="请输入密码"
            />
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input
              v-model="registerForm.confirmPassword"
              type="password"
              placeholder="请再次输入密码"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="register-button" :loading="loading" @click="handleRegister">注册</el-button>
            <el-button class="login-button" @click="goToLogin">返回登录</el-button>
          </el-form-item>
        </el-form>
        <div class="copyright">Copyright @ 2025 HUCM-OpenLabs. All Rights Reserved</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.login-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  background-color: #f5f7fa;
}

.background-section {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 0 16px 16px 0;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  margin: 32px;
  margin-right: 16px;
}

.logo {
  position: absolute;
  top: 32px;
  left: 32px;
  font-size: 24px;
  color: #409eff;
}

.form-section {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px;
  margin: 32px;
  margin-left: 16px;
  background-color: #fff;
  border-radius: 16px 0 0 16px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.form-content {
  width: 100%;
  max-width: 360px;
}

.form-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 24px;
  text-align: center;
  color: #303133;
}

.user-type-select {
  text-align: center;
  margin-bottom: 32px;
}

.user-type-select :deep(.el-radio-button__inner) {
  padding: 8px 24px;
}

.register-form :deep(.el-form-item__label) {
  padding-bottom: 8px;
  font-weight: 500;
}

.register-form :deep(.el-input__wrapper) {
  border-radius: 8px;
}

.register-button {
  width: 48%;
  margin-top: 24px;
  height: 44px;
  font-size: 16px;
  border-radius: 8px;
}

.login-button {
  width: 48%;
  margin-top: 24px;
  height: 44px;
  font-size: 16px;
  border-radius: 8px;
  margin-left: 4%;
}

.copyright {
  text-align: center;
  color: #909399;
  font-size: 12px;
  margin-top: 32px;
}
</style>
